<template>
  <div>
    <div class="title_box">
      <div class="title_left">{{ title }}</div>
      <div class="title_right">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </div>
</template>
  <script setup lang="ts">
import { defineProps } from "vue";
const props = defineProps({
  title: {
    //标题内容
    type: String,
    required: true,
  },
});
</script>
  <style scoped>
.title_box {
  display: flex;
  width: 100%;
  height: 20px;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding-left: 15px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(
    94deg,
    #264493 0%,
    rgba(15, 34, 73, 0) 100%,
    rgba(14, 21, 19, 0) 100%
  );
  border-bottom: 1px solid;
  border-image: linear-gradient(
      90deg,
      rgba(38, 67, 145, 1),
      rgba(27, 129, 78, 0)
    )
    1 1;
}
.title_left {
  font-size: 13px;
  color: #ffffff;
}
.title_right {
  height: 16px;
  width: 16px;
  position: relative;
}
.title_right span {
  display: block;
  width: 4px;
  height: 4px;
  position: absolute;
  background: rgba(38, 67, 145, 1);
  border-radius: 4px;
}
.title_right span:nth-child(1) {
  top: 0;
  left: 0;
}
.title_right span:nth-child(2) {
  top: 0;
  right: 0;
}
.title_right span:nth-child(3) {
  bottom: 0;
  right: 0;
}
</style>